<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/抽奖.gif" type="image/x-icon">
<title>福州ROBO信奥种子选手抽奖专用</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background: linear-gradient(90deg,brown,white,orange);
    }
    #container {
        width: 350px;
        height: 340px;
        margin: 2% auto;
        border: 7px solid #99d4ff;
        border-radius: 10px;
        padding: 2%;
    }
    #list {
        width: 360px;
        height: 340px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #list li,
    #list span {
        width: 100px;
        height: 100px;
        float: left;
        text-align: center;
        line-height: 100px;
        position: relative;
        background-color: #384f9a;
        margin: 1.4%;
        border-radius: 5px;
    }
    #list li img{
        display: block;
        width: 100%;
        height: 100%;
    }
    #list li .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
        background: url(images/mask.png) no-repeat;
        background-size: cover;
        display: none;
    }
    #list span:hover {
        cursor: pointer;
        color: orange;
        font-size: 18px;
    }
    #list .active .mask{
        display: block;
    }
    #message {
        text-align: center;
        position:absolute;
        line-height: 50px;
        left: 50%;
        top: 20px;
        width: 300px;
        height: 50px;
        margin-left: -150px;
        display: none;
        background: rgb(156, 231, 85);
        color: black;
        border-radius: 20px;
    }
    #select{
        font-size: 18px;
        line-height: 32px;
        text-align: center;
        margin-top: 3%;
    }
    #classSelect{
        height: 28px;
    }
    li{
        border: 3px transparent dashed;
    }
    #startbutton
    {
        border: 3px transparent dashed;
    }
</style>
</head>
<body> 
    <marquee behavior="" direction="left">幸运大抽奖：</marquee>
    <div style="text-align:center;"> 
        <a href="抽奖1.html" style="text-decoration:none;color:black;font-size:18px;">滚动牌</a>
        <a href="抽奖2.html" style="text-decoration:none;color:black;font-size:18px;">幸运大转盘</a>
        <a href="抽奖3.html" style="text-decoration:none;color:black;font-size:18px;">翻牌子</a>
        <a href="抽奖4.html" style="text-decoration:none;color:black;font-size:18px;">新玩法</a>
    </div>           
    <h3 style="text-align:center;margin-top: 2%;color:rgb(8, 5, 5);font-size: 30px;">ROBO 信奥抽奖</h3>
    <div id="select">
        <select id="classSelect">
            <option value="classA">世欧校区</option>
            <option value="classB">东街口校区</option>
            <option value="classC">五四路校区</option>
            <option value="classD">群升校区</option>
            <option value="classE">明腾校区</option>
            <option value="classF">东街口校区F</option>
        </select>
        <button id="btn" onclick="check()" accesskey="s">选择校区</button>  
    </div>
    <div id="container">
        <ul id="list">
            <!-- img标签放奖品图片 -->
            <!-- mask类为抽奖滚动起来的标记 -->
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
            <li><img src="images/抽奖.gif"/><div class="mask"></div></li>
        </ul>
        <div id="message"></div><!-- 获奖信息展示 -->
    </div>

    <script src="studentlist.js"></script>
    <script type="text/javascript">
        function shuffle(arr) {
            var len = arr.length;
            for (var i = 0; i < len - 1; i++) {
                var index = parseInt(Math.random() * (len - i));
                var temp = arr[index];
                arr[index] = arr[len - i - 1];
                arr[len - i - 1] = temp;
            }
            return arr;
        }
        var studentList=""; 
        function check(){     
            const selectedClass = document.getElementById('classSelect').value;
            studentList = shuffle(students[selectedClass]);  

            var li = container.getElementsByTagName('img'); 
            var len = studentList.length; 
            for(var j = 0; j < li.length; j++) {
                li[j].setAttribute("src","images/"+studentList[j%len]+".png");
            }
        }  

        var container = document.getElementById('container'),
            li = container.getElementsByTagName('li'),
            span = document.getElementById('startbutton'),
            message = document.getElementById('message'),
            timer = null;
            bReady = true;//定义一个抽奖开关

        var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序

        var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品

        //开始抽奖
        function startlottery(){
            if(bReady) {//当抽奖开关为true的时候，可点击抽奖
                message.style.display="none";//将获奖信息div隐藏（以防止上次抽奖信息还显示）
                span.style.background="#ada7a8";
                bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
                num = getrandomnum(1,9)//得到一个随机数（即奖品）
                // console.log(num)
                startinit(num);//执行抽奖初始化
            }
        }


        //抽中的奖品 返回1-9的整数，包含1，不包含9
        function getrandomnum(n, m) {
            return parseInt((m - n) * Math.random() + n);
        }


        //抽奖初始化
        function startinit(num) {
            var i = 0;  //定义一个i 用来计算抽奖跑动的总次数
            var t =20;  //抽奖跑动的速度 初始为200毫秒
            var rounds = 3;  //抽奖转动的圈数
            var rNum = rounds*8;  //标记跑动的次数（这是一个条件判断分界线）
            timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数

            //抽奖滚动的函数
            function startscroll() {
                //每次滚动抽奖将所有li的class都设为空
                for(var j = 0; j < li.length; j++) {
                    li[j].className = '';
                    li[j].style.border = "transparent solid 3px";
                }

                var prizenum = prize[i%li.length];  //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
                li[prizenum].className = "active";
                li[prizenum].style.border = "red solid 3px";
                i++;

                if(i<rNum-8){  //当i小于转(rNum-8次)的数量，t不变还是200毫秒
                    timer = setTimeout(startscroll, t);//继续执行抽奖滚动
                }else if(i>= rNum-8 && i< rNum+num){
                    //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
                    t+=(i-rNum+8)*5;
                    timer = setTimeout(startscroll, t);//继续执行抽奖滚动
                }
                if( i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息
                    if(studentList)
                        message.innerHTML="哈哈，终于轮到<strong>"+studentList[prizenum%studentList.length]+"</strong>了，好开森！！";
                    var timer2 = null;
                    timer2 = setTimeout(function(){
                        message.style.display="block";//奖品展示的信息为显示状态
                        span.style.background="#ff3a59";
                        clearTimeout(timer2);
                    },1000);
                    bReady = true;//当计时器结束后让span标签变为抽奖状态
                    clearTimeout(timer);
                }

            }
        }

    </script>
    </body>
</html>
